<template>
    <DialogComponent class="custom-dialog" :layer="dialogParams" @update:visible="closePermissionDialog" @confirm="confirmPermissionDialog">
        <div>
            <div>当前场景名称：{{scene.sceneName}}</div>
            <el-row class="mt20">
                <el-col :span="24">
                    <el-input v-model.trim="keyword" placeholder="请输入资源关键词" maxlength="200" size="large" :suffix-icon="Search" clearable/>
                </el-col>
            </el-row>
            <div class="mt20">
                <el-tree ref="treeRef" node-key="id" :data="treeData" :default-checked-keys="checkedKeys" :props="defaultProps" default-expand-all show-checkbox check-strictly :filter-node-method="filterNode" @check-change="changePermission" />
            </div>
        </div>
    </DialogComponent>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import DialogComponent from '@/components/dialogComp.vue'
import { Search } from '@element-plus/icons-vue'
export default {
    components: { DialogComponent },
    props: {
        dialogParams: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        },
        scene: {
            type: Object,
            default: () => {
                return null
            }
        }
    },
    emits: ['dialog:confirm', 'dialog:close'],
    setup(props, ctx) {
        const store = useStore()
        const keyword = ref('')
        const treeRef = ref()
        const { scene } = toRefs(props)
        console.log('scene', scene)
        const defaultProps = {
            children: 'children',
            label: 'permissionName',
            class: function (data, node) {
                if (data.permissionType===2) {
                    return 'is-inline'
                }
                return null
            }
        }

        const checkedKeys = ref([])
        const treeData = ref([])
        watch(keyword, (val) => {
            treeRef.value.filter(val)
        })

        const filterNode = (value, data) => {
            if (!value) return true
            return data.permissionName.includes(value)
        }
        // 获取已分配权限
        const getAssignedPermissions = () => {
            store.dispatch('proxyAction', {
                name: 'frontGetScenePermissions',
                queries: {
                    sceneKey: scene.value.sceneKey
                }
            }).then((res) => {
                console.log('checkedKeys', res)
                checkedKeys.value = res.data || []
            }).finally(() => {

            })
        }
        // 列表
        const getList = () => {
            store.dispatch('proxyAction', {
                name: 'frontGetScenePermissionsList'
            }).then((res) => {
                console.log('res', res)
                treeData.value = res.data || []
            }, (error) => {
                console.log('error', error)
                getAssignedPermissions()
            }).finally(() => {

            })
        }
        const changePermission = (node, checked) => {
            console.log('node', node, checked, scene)
            store.dispatch('proxyAction', {
                name: 'frontAssignScenePermission',
                data: {
                    authorizeType: checked,
                    permissionId: node.id,
                    sceneKey: scene.value.sceneKey
                }
            }).then((res) => {
                console.log('res', res)
            }).finally(() => {

            })
        }
        // 关闭添加账号对话框
        const closePermissionDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:close')
        }
        // 账号对话框confirm
        const confirmPermissionDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:confirm')
        }
        onMounted(() => {
            getAssignedPermissions()
            getList()
        })
        return {
            Search,
            treeRef,
            keyword,
            defaultProps,
            checkedKeys,
            treeData,
            filterNode,
            getList,
            changePermission,
            closePermissionDialog,
            confirmPermissionDialog
        };
    }
}
</script>
<style lang="scss" scoped>
.mr0 {
    margin-right: 0;
}
.mt20 {
    margin-top: 20px;
}
.el-tree :deep(.el-tree-node__children) {
    white-space: normal;
}
.el-tree :deep(.el-tree-node.is-inline) {
    display: inline-block;
}
.custom-dialog :deep(.el-dialog__footer) {
    text-align: center !important;
}
</style>